<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: scroll;
        }
        .el-header, .el-footer {
            color: #333;

        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
        }

    </style>
</head>
<body>
<div id="app" style="width: 100%;height: 100%;">
    <el-container>
<!--        <el-header style="text-align: right;height: 40px;">-->
<!--            <el-button type="text" @click="dialogFormVisible = true">新建</el-button>-->
<!--            <el-dialog fullscreen="true" title="成员信息" :visible.sync="dialogFormVisible" style="text-align: left!important;" >-->
<!--                <el-form :model="form">-->
<!--                    &lt;!&ndash;                    <el-form-item label="ID" :label-width="formLabelWidth">&ndash;&gt;-->
<!--                    &lt;!&ndash;                        <el-input v-model="form.inListId" autocomplete="off"></el-input>&ndash;&gt;-->
<!--                    &lt;!&ndash;                    </el-form-item>&ndash;&gt;-->
<!--                    <el-form-item label="名称" :label-width="formLabelWidth">-->
<!--                        <el-input v-model="form.importName" autocomplete="off"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="数量" :label-width="formLabelWidth">-->
<!--                        <el-input v-model="form.importNumber" autocomplete="off"></el-input>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--                <div slot="footer" class="dialog-footer">-->
<!--                    <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--                    <el-button type="primary" @click="dialogFormVisible = false,addInList()">确 定</el-button>-->
<!--                </div>-->
<!--            </el-dialog>-->
<!--        </el-header>-->
        <el-main width="80%">
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="goodsname"
                            label="商品名称"
                            width="240">
                    </el-table-column>
                    <el-table-column
                            prop="goodsNumber"
                            label="库存数量"
                            width="240">
                    </el-table-column>
                    <el-table-column
                            prop="threshold"
                            label="阈值"
                            width="*">
                    </el-table-column>

<!--                    <el-table-column-->
<!--                            prop="state"-->
<!--                            label="是否需要进货"-->
<!--                            width="*">-->
                    </el-table-column>
                    <el-table-column width="180">
                        <template slot-scope="scope">

                            <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="small"></el-button>
                            <!--                            页面已完成 只差数据保存删除的操作-->
                            <el-dialog fullscreen="true" title="信息" :visible.sync="dialogFormVisible2" style="text-align: left!important;" >
                                <el-form :model="form2">
                                    <el-form-item label="商品名称" :label-width="formLabelWidth">
                                        <el-input v-model="form2.goodsname" autocomplete="off" readonly></el-input>
                                    </el-form-item>
                                    <el-form-item label="库存数量" :label-width="formLabelWidth">
                                        <el-input v-model="form2.goodsNumber" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="阈值" :label-width="formLabelWidth">
                                        <el-input v-model="form2.threshold" autocomplete="off"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">

                                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                                    <!--                                    @click="dialogFormVisible1 = false,fixPerson()"-->
                                    <el-button type="primary" @click="dialogFormVisible2 = false,fixGoods()">确 定</el-button>
                                </div>
                            </el-dialog>

<!--                            <el-button  type="danger" icon="el-icon-delete" size="small" @click="open(scope.$index, scope.row.inListId)"></el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-main>
    </el-container>
</div>


<script>
    let app = new Vue({
        el: '#app',
        data(){
            return{
                // 到时调用数据库 直接调用数据
                role: '',
                tableData: [],
                dialogVisible: false,
                dialogFormVisible: false,
                dialogFormVisible1: false,
                dialogFormVisible2: false,
                // 表单内容稍后再改
                form: {
                    inListId:'',
                    importName: '',
                    importNumber: '',
                },
                formLabelWidth: '120px',
                form1: '',
                form2: '',
            }

        },
        // 初始化函数
        created:function(){
            this.getListOfGoods();
        },
        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            // 获取所有进货单
            getListOfGoods(){
                axios.post('/goods/getListOfGoods',
                    "currentPage=1&pageSize=1000"
                ).then(function (res) {
                    console.info(res.data);
                    // let list =$.parseJSON(res.data);
                    let list = res.data;
                    let bufferList = [];
                    for(let key in list) {
                        let i = new Object();
                        i.goodsname = list[key].goodsname;
                        i.goodsNumber=list[key].goodsnumber;
                        i.threshold = list[key].threshold;
                        // if(list[key].goodsnumber<list[key].threshold){
                        //     i.state='是';
                        // }
                        // else {
                        //     i.state='否';
                        // }
                        bufferList.push(i);
                    }
                    app.tableData = bufferList;
                    console.info(app.tableData);

                }).catch(function (error) {
                    console.log(error);
                });
            },

            // 编辑按钮响应事件
            edit(row){
                this.dialogFormVisible2 = true;
                console.log(row);
                this.form2 = row;
            },
            // 修改操作
            fixGoods(){
                axios.post('/goods/fixGoods',
                    "goodsName="+this.form2.goodsname+
                    "&goodsNumber="+this.form2.goodsNumber+
                    "&threshold="+this.form2.threshold
                ).then(function (res) {
                    console.info(res.data);
                    app.fixSuccess();
                    window.location.reload();
                }).catch(function (error) {
                    console.log(error);
                });
            },
            // 修改成功
            fixSuccess(){
                this.$message({
                    message:'修改成功',
                    type:'success'
                });
            },

        }
    })
</script>
</body>
</html>